Mermaid記法 - シーケンス図
一気に全部は多すぎるので、使う機会があったり練習で書いたらちょっとずつページを作っていく。
個人的にはこれが一番使う機会が多そう。コードリーディングしてメモを残すとかの用途で便利。
シーケンス図のドキュメント
ドキュメントめちゃくちゃわかりやすいけど、量が多いmochi5o.icon
シーケンス図の書き方
sequenceDiagramと宣言する
登場人物を定義する
actor で定義すると人の形で描画される
participant で定義すると通常の描画（四角い箱）
actor|participant ShortName as LongName のように省略記法を使える
登場人物をbox でグルーピング
box グルーピングの概要と書いた行からendを記載するまでの箇所は実線で囲まれる
boxの後に色の名前とかrgbを指定することで背景色を変えることができる
box Aqua グループの概要 box rgb(33,66,99) グループの概要
登場人物たちを矢印でつないでシーケンス図を作る
-> 矢印のない実線
--> 矢印のない点線
->> 矢印付きの実線
-->> 矢印付きの点線
-x 最後に十字がある実線
--x 最後に十字がある点線。
-) 最後に開いた矢印がある実線 (非同期)
--) 最後に開いた矢印のある点線 (非同期)
処理の内容をグルーピング（他にもあるが抜粋）
loop 特定の処理と書いた行からendを記載するまでの箇所は薄い点線で囲まれる
loog cronで毎時実行とか記載しておくとわかりやすくなる
alt 特定の処理 else 他の処理 endの組み合わせで条件別の処理を記載できる
par Action1 and Action2 end の組み合わせで並列処理を記載できる
記述例
code:md
sequenceDiagram
actor u as ユーザー
box 自社サービス
participant s as サービスサイト
participant b as バックエンド
end
participant o as 外部サービス
u->>s:アクセス
s->>b:アクセス
loop 毎分ポーリング
b-->>o:新着情報取得
o-->>b:データ返却
end
b->>s:画面表示
s->>u:画面表示
表示される図
上記の記述をすると、こんな感じになる（Notionで作った）
https://gyazo.com/b7f35b859e389c9f288cc60dc7716184